<template>
  <div class="">
    <el-select
      v-model="myname_2"
      :placeholder="text"
      @visible-change="visibleChange($event)"
      popper-class="popper"
      :popper-append-to-body="false"
      @change="selectChange"
    >
      <template slot="prefix">
        <span>
          <img src="/images/enterprise/xia@2x.png" 
            :style="'transform: rotateZ('+ rotateZ + 'deg)'">
          </span>
      </template>
      <el-option
        v-for="(item,index) in options"
        :key="item.value || index"
        :value="item.value || item">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    text: {
      type: [String, Object],
      default: '请输入'
    },
    options: {
      type: [Array, Object],
      required: true
    },
    myname: {
      type: [String, Object],
      required: true
    },
  },
  data () {
    return {
      rotateZ: 0,
      myname_2: ''
    }
  },
  computed: {},
  watch: {
    options: function (){
      console.log('变化了', this.options)
      // this.myname_2 = this.options[0] // 默认为第一个
      this.myname_2 = '' // 默认为第一个

    }
  },
  created () {},
  mounted () {
    this.myname_2 = this.myname
    // console.log('变1化了', this.options)

  },
  methods: {
    visibleChange(isV){
      if(isV){
        this.rotateZ = 180
      } else {
        this.rotateZ = 0
      }
    },
    selectChange(v){
      // this.text = 
      // console.log('------------ ',v)
      this.$emit('update:myname',v)
    }
  }
}
</script>

<style lang="stylus" scoped>
>>> .el-select {
  font-family: SourceHanSansCN-Regular !important;
  width 132px;
  box-sizing: border-box;
  height: 40px;
  margin-right: 9px;
  .el-input {
    background-color: #043F7A;
    height: 40px;
    .el-input__inner {

      font-size: 15px !important;
    }
  }
  .el-input__prefix {
    position relative;
    img {
      position absolute;
      left: auto;
      right: 12px;
      top: 4px;
      width: 8px;
      transition: transform .3s;
    }
  }
  .el-input__inner {
    font-family: SourceHanSansCN-Regular !important;
    background-color: #043F7A;
    border: 1px solid #2E97FF;
    text-align: center;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    height: 40px;
    padding: 0 10px;
  }
  >>> .el-input__inner::placeholder {
    font-family: SourceHanSansCN-Regular !important;
    text-align: center;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
  }
  .el-input__suffix {
    display: none;  

  }
  ::-webkit-scrollbar{
    width: 4px;
  }
  ::-webkit-scrollbar-thumb
  {
    background-color: rgba(46, 151, 255, 1);
    // height: 4px;
  }
}
  >>> .el-input__inner::placeholder {
    font-family: SourceHanSansCN-Regular !important;
    // text-align: center;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
  }
  >>> .el-input__inner {
    // text-align: center;
    font-family: SourceHanSansCN-Regular !important;
    color: #fff;
    font-size: 15px;
    line-height: 24px;
  }
  >>> .popper{
  // :deep(.popper){
    width: 132px;
    max-height: 118px;
    overflow-y: auto;
    margin: 0;
    z-index: 99999;
    background-color: #03274a;
    left: 0px !important;
    border: 0;
    .popper__arrow {
      display: none;  
    }
    .el-select-dropdown__item {
      padding: 0;
      text-align: center;
      font-size: 15px !important;
      color: #FFF !important;
      height: 19px !important;
      line-height: 19px !important;
      margin: 6px 0 !important;
      font-family: SourceHanSansCN-Regular !important;
      width: 132px;
    }
    .hover, .selected {
      // color: #FFFFFF !important;
      color: #409EFF !important;
      background-color: #03274a !important;
      font-weight: 400;
    }
  }
</style>
